<script>
  // import Box from "../components/Box.svelte";
  // import Card from "../components/Card.svelte";
  // import Article from "../components/Article.svelte";
  import Hoverable from '../components/Hoverable.svelte';
</script>

<!-- 默认插槽 -->
<!-- <Box>你好胖</Box> -->


 <!-- 具名插槽 -->
<!-- <Card>
  <span slot="name">张丹</span>
  <span slot="address">新街口2号线</span>
</Card> -->

<!-- 判断插槽是否有内容 -->
<!-- <Article title="出师表">
  <span slot="content">先帝创业艰难</span>
</Article> -->


<Hoverable let:hovering={active}>
  <div class:active>
    {#if active}
      <p>I am being hovered upon.</p>
    {:else}
      <p>Hover over me!</p>
    {/if}
  </div>
</Hoverable>


<style>
div { padding: 1em; margin: 0 0 1em 0; background-color: #eee; }
.active { background-color: #ff3e00; color: white; }
</style>
